<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>车辆费用统计</title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../plugins/layui/css/myPage.css">
</head>
<body class="layui-layout-body">





<blockquote class="layui-elem-quote"  >

    <div class=" layui-form" >
        <div class="layui-form-item"  >

            <!--<div class="layui-input-inline" style="width: 100px">-->

            <!--<label class="layui-form-label">车牌号</label>-->
            <!--</div>-->

            <!--<div class="layui-input-inline">-->

            <!--<select class="layui-input-inline" id="searchCph" lay-search>-->

            <!--<option value=""></option>-->
            <!--</select>-->
            <!--</div>-->

            <div class="layui-input-inline" style="width: 100px">
                <label class="layui-form-label">起始日期</label>

            </div>
            <div class="layui-input-inline">
                <input type="text"  class="layui-input" id="searchQsrqContent">

            </div>
            <div class="layui-input-inline" style="width: 100px">

                <label class="layui-form-label">结束日期</label>
            </div>
            <div class="layui-input-inline">

                <input type="text"  class="layui-input" id="searchJsrqContent">
            </div>

            <div class="layui-input-inline " style=" width:10%; position: absolute;right: 10% ">
                <button class="layui-btn layui-btn-normal" id="tongji">统计</button>

            </div>

        </div>
    </div>
</blockquote>

<div class="layui-row">
    <div class="layui-col-xs12">
        <div id="TwoLineChart" style="width:100%; height:800px;"></div>
    </div>
</div>

<script src="../plugins/echarts.common.min.js"></script>

<script src="../plugins/layui/layui.js"></script>
<script src="../js/config.js"></script>
<script src="../js/tools.js"></script>




<script>
    //JavaScript代码区域
    layui.use(['form' ,'table','element','laypage','laydate','tab'], function(){
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$;
        var currentPage = 1;
        var tableheight= 'full-92';
        var tablewidth ;
        var laydate = layui.laydate;


        var nowdate = new Date();
        var date = new Date().format("yyyy-MM-dd");
        var preMonth = getPreMonth(date )
        laydate.render({
            elem: '#searchQsrqContent' //指定元素
            ,format:'yyyy-MM-dd'
            ,theme:'#0099FF'
            ,value: preMonth
        });
        laydate.render({
            elem: '#searchJsrqContent' //指定元素
            ,format:'yyyy-MM-dd'
            ,theme:'#0099FF'
            ,value:nowdate
        });
//搜索
        function loadTwoLine() {
            var myChart = echarts.init(document.getElementById('TwoLineChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '日期费用统计',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',

                },
                grid: {
                    left: '6%',
                    right: '4%',
                    bottom: '16%',
                    containLabel: true,
                    width: 1500
                },
                dataZoom: {
                    show: true,
                    start : 0,
                    end:80,
                    height:10,//滚动条高度
                    backgroundColor:'#effbfe',//滚动条滚动区域背景色
                    dataBackgroundColor:'#007acc',//有数据时候数据在滚动条上显示的颜色
                    fillerColor:'#b7e9f8',//滚动条条条本身的颜色
                    handleColor:'#56abe4',//控制滚动条长短（滚动条两边）的爪爪颜色
                    handleSize:10//爪爪的宽度
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                    data: ['过路费', '节油', '现金加油', '线路补助', '买单', '维修费用场内', '维修费用场外', '违章罚款', '停车费', '住宿费', '装卸费', '船票', '事故处理', '配件', '其他支出', '当日借款', '超油', '回货', '回货补回', '其他收入', '办公室收入', '当日还款', '昨日余额', '当日余额']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: {
                    type: 'category',
                    boundaryGap: false, //取消左侧的间距
                    data: []
                },
                yAxis: {
                    type: 'value',
                    splitLine: { show: false },//去除网格线
                    name: ''
                },
                series: [
                    {
                        name: '过路费',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '节油',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '现金加油',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '线路补助',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '买单',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '维修费用场内',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '维修费用场外',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '违章罚款',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '停车费',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '住宿费',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '装卸费',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '船票',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '事故处理',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '配件',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '其它支出',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '办公室支出',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '当日借款',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '超油',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '回货',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '回货补回',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '其他收入',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '办公室收入',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '当日还款',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '昨日余额',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    },
                    {
                        name: '当日余额',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    }]
            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（实际用来盛放X轴坐标值）
            var series1 = [];
            var series2 = [];
            var series3 = [];
            var series4 = [];
            var series5 = [];
            var series6 = [];
            var series7 = [];
            var series8 = [];
            var series9 = [];
            var series10 = [];
            var series11 = [];
            var series12 = [];
            var series13 = [];
            var series14 = [];
            var series15 = [];
            var series16 = [];
            var series17 = [];
            var series18 = [];
            var series19 = [];
            var series20 = [];
            var series21 = [];
            var series22 = [];
            var series23 = [];
            var series24 = [];
            var series25 = [];

            $.ajax({
                type: 'get',
                url:  contextPath+"/datecostNum?"+"qsrq="+$("#searchQsrqContent").val()+"&"+"jsrq="+$("#searchJsrqContent").val(),
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    console.log(result);
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list.glf, function (index, item) {
                        names.push(item.AREA);    //挨个取出类别并填入类别数组
                        series1.push(item.LANDNUM);
                    });
                    // result.list.jieyou.sort(function(a,b){return b[0]['AREA'] < a[0]['AREA'] ? 1 : -1 })
                    $.each(result.list.jieyou, function (index, item) {
                        series2.push(item.LANDNUM);
                    });
                    $.each(result.list.xjjy, function (index, item) {
                        series3.push(item.LANDNUM);
                    });
                    $.each(result.list.xlbz, function (index, item) {
                        series4.push(item.LANDNUM);
                    });
                    $.each(result.list.maidan, function (index, item) {
                        series5.push(item.LANDNUM);
                    });
                    $.each(result.list.wxfycn, function (index, item) {
                        series6.push(item.LANDNUM);
                    });
                    $.each(result.list.wxfycw, function (index, item) {
                        series7.push(item.LANDNUM);
                    });
                    $.each(result.list.wzfk, function (index, item) {
                        series8.push(item.LANDNUM);
                    });
                    $.each(result.list.tcf, function (index, item) {
                        series9.push(item.LANDNUM);
                    });
                    $.each(result.list.zsf, function (index, item) {
                        series10.push(item.LANDNUM);
                    });
                    $.each(result.list.zxf, function (index, item) {
                        series11.push(item.LANDNUM);
                    });
                    $.each(result.list.chuanpiao, function (index, item) {
                        series12.push(item.LANDNUM);
                    });
                    $.each(result.list.sgcl, function (index, item) {
                        series13.push(item.LANDNUM);
                    });
                    $.each(result.list.peijian, function (index, item) {
                        series14.push(item.LANDNUM);
                    });
                    $.each(result.list.qtzc, function (index, item) {
                        series15.push(item.LANDNUM);
                    });
                    $.each(result.list.bgszc, function (index, item) {
                        series16.push(item.LANDNUM);
                    });
                    $.each(result.list.drjk, function (index, item) {
                        series17.push(item.LANDNUM);
                    });
                    $.each(result.list.chaoyou, function (index, item) {
                        series18.push(item.LANDNUM);
                    });
                    $.each(result.list.huihuo, function (index, item) {
                        series19.push(item.LANDNUM);
                    });
                    $.each(result.list.hhbh, function (index, item) {
                        series20.push(item.LANDNUM);
                    });
                    $.each(result.list.qtsr, function (index, item) {
                        series21.push(item.LANDNUM);
                    });
                    $.each(result.list.bgssr, function (index, item) {
                        series22.push(item.LANDNUM);
                    });
                    $.each(result.list.drhk, function (index, item) {
                        series23.push(item.LANDNUM);
                    });
                    $.each(result.list.zrye, function (index, item) {
                        series24.push(item.LANDNUM);
                    });

                    $.each(result.list.drye, function (index, item) {
                        series25.push(item.LANDNUM);
                    });



                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            data: series1
                        },
                            {
                                data: series2
                            }
                            ,
                            {
                                data: series3
                            },
                            {
                                data: series4
                            },
                            {
                                data: series5
                            },
                            {
                                data: series6
                            },
                            {
                                data: series7
                            },
                            {
                                data: series8
                            },
                            {
                                data: series9
                            },
                            {
                                data: series10
                            },
                            {
                                data: series11
                            },
                            {
                                data: series12
                            },
                            {
                                data: series13
                            },
                            {
                                data: series14
                            },
                            {
                                data: series15
                            },
                            {
                                data: series16
                            },
                            {
                                data: series17
                            },
                            {
                                data: series18
                            },
                            {
                                data: series19
                            },
                            {
                                data: series20
                            },
                            {
                                data: series21
                            },
                            {
                                data: series22
                            },
                            {
                                data: series23
                            },
                            {
                                data: series24
                            },
                            {
                                data: series25
                            }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };
        loadTwoLine();


        //统计
        $("#tongji").on('click',function(){
            if($("#searchQsrqContent").val() != "" && $("#searchJsrqContent").val() != ""){
                if(!checkEndTime($("#searchQsrqContent").val(),$("#searchJsrqContent").val())){
                    layer.msg("起始日期小于结束日期!");
                }else {
                    loadTwoLine();
                }
            }else if($("#searchQsrqContent").val() != "" && $("#searchJsrqContent").val() == ""){
                layer.msg("结束日期不能为空！");
            }else if($("#searchQsrqContent").val() == "" && $("#searchJsrqContent").val() != ""){
                layer.msg("起始日期不能为空！");
            }
        });
    });





</script>
</body>
</html>